<!--
  @Descripttion：新增/编辑楼层
  @Author：zqy
  @Date：2020-08-01 14:07:00
  @Last Modified by：zqy
  @Last Modified time：2020-08-01 14:07:00
-->
<template>
  <inside-page :titles="['帮助中心页面管理',`楼层配置【${actPageData.pageName}】`, `${floorId?`编辑楼层【${floorData.storeyName}】`:'新增楼层'} - ${dlgTitle}`]" cancel-title="返回" @go-back="goBack">
    <template slot="button">
      <el-button v-if="!showType" v-preventReClick v-loading="submiting" size="mini" type="primary" @click="submitForm">保存</el-button>
    </template>
    <div v-if="!submiting" class="mt20">
      <floor-type v-if="showType==='type'" @change="handleTypeChange" />
      <floor-layout
        v-if="showType==='layout' && floorType"
        :visible.sync="showLayout"
        :layout-list="layoutList"
        @change="handleLayoutChange"
      />
      <div v-if="!showType">
        <basic-edit
          v-if="activeLayout && floorType"
          ref="refBasic"
          :floor-type="floorType"
          :layout-data="activeLayout"
          :floor-data="floorData"
          :category-data="categoryData"
        />
        <template v-if="activeLayout && floorType">
          <component
            :is="componentName"
            ref="refItem"
            :layout-data="activeLayout"
            :category-data="categoryData"
            :item-list="floorData.contentDTOList"
          />
          <!-- <content-item-list
            v-if="floorType==='content'"
            ref="refItem"
            :layout-data="activeLayout"
            :item-list="floorData.contentDTOList"
          />
          <fastlink-item-list
            v-else-if="floorType==='fastlink'"
            ref="refItem"
            :layout-data="activeLayout"
            :item-list="floorData.contentDTOList"
          />
          <question-item-list
            v-else
            ref="refItem"
            :layout-data="activeLayout"
            :item-list="floorData.contentDTOList"
          /> -->
        </template>
      </div>
    </div>
  </inside-page>
</template>

<script>
import FloorType from './component/FloorType'
import FloorLayout from './component/FloorLayout'
import BasicEdit from './component/BasicEdit'
import ContentItemList from './component/ContentItemList'
import FastlinkItemList from './component/FastlinkItemList'
import QuestionItemList from './component/QuestionItemList'
import { FLOOR_TYPE, FLOOR_LAYOUT } from './constData'
import { saveActPageFloor } from '../api/floor'
export default {
  name: 'ActPageFloorEdit',
  components: { FloorType, FloorLayout, BasicEdit, ContentItemList, FastlinkItemList, QuestionItemList },
  props: {
    pageShow: {
      type: Boolean,
      default: false
    },
    categoryData: {
      type: Array,
      default: () => []
    }, // 类目树
    floorSort: {
      type: Number,
      default: 1
    }, // 已有楼层最大排序号
    actPageData: {
      type: [String, Object],
      default: ''
    }, // 页面基础数据
    floorData: {
      type: [Object, String],
      default: ''
    } // 当前编辑的楼层详细数据
  },
  data() {
    return {
      submiting: false, // 是否操作加载中
      showType: 'type', // type 楼层类型， layout  布局
      floorType: '', // 楼层类型 FLOOR_TYPE
      floorLayout: '' // 楼层布局 FLOOR_LAYOUT
    }
  },

  computed: {
    nowPageShow: {
      get() {
        return this.pageShow
      },
      set(val) {
        this.$emit('update:pageShow', val)
      }
    },
    componentName() {
      const obj = {
        content: 'ContentItemList',
        fastlink: 'FastlinkItemList',
        question: 'QuestionItemList'
      }
      return obj[this.floorType] || 'ContentItemList'
    },
    dlgTitle() {
      if (this.floorId) {
        const name = FLOOR_TYPE[this.floorType] || ''
        return `楼层详细信息配置【${name}】 `
      }
      if (this.showType === 'type') {
        return '选择楼层类型'
      } else if (this.showType === 'layout') {
        return '选择布局'
      } else {
        const name = FLOOR_TYPE[this.floorType] || ''
        return `楼层详细信息配置【${name}】 `
      }
    },
    floorId() {
      return this.floorData.id || ''
    },
    // 布局列表
    layoutList() {
      let list = []
      if (this.floorType) {
        list = FLOOR_LAYOUT.filter(v => v.type === this.floorType)
      }
      return list
    },
    activeLayout() {
      let list = []
      if (this.floorType && this.floorLayout) {
        list = FLOOR_LAYOUT.filter(v => v.type === this.floorType && v.dictCode === this.floorLayout)
      }
      return list.length ? list[0] : ''
    },
    layoutDetail() {
      if (this.floorType && this.floorLayout) {
        const list = FLOOR_LAYOUT.filter(v => v.type === this.floorType && v.dictCode === this.floorLayout)
        return list[0] || ''
      }
      return ''
    }
  },
  created() {
    if (this.floorData && this.floorData.id) {
      this.floorType = this.floorData.storeyType
      this.floorLayout = this.floorData.layoutType
      this.showType = ''
    }
  },

  methods: {
    goBack() {
      if (!this.showType && !this.floorId) {
        this.showType = 'layout'
        return
      } else if (this.showType === 'layout') {
        this.showType = 'type'
        return
      }
      this.nowPageShow = false
    },
    // 确认选择楼层类型
    handleTypeChange(type) {
      this.floorType = type
      this.showType = 'layout'
      this.showLayout = true
    },
    // 确认选择布局类型
    handleLayoutChange(layout) {
      this.floorLayout = layout.dictCode
      this.showType = ''
    },
    submitForm() {
      if (this.submiting) return
      const promiseList = [
        this.$refs.refBasic.validateForm(),
        this.$refs.refItem.validateForm()
      ]
      Promise.all(promiseList).then((data) => {
        const basicData = data[0]
        const itemData = data[1]
        let fullIdPath = ''
        let categoryId = ''
        if (basicData.categoryIdPath) {
          fullIdPath = basicData.categoryIdPath.join('/')
          categoryId = basicData.categoryIdPath[basicData.categoryIdPath.length - 1]
        }
        const formData = {
          id: this.floorId || null,
          pageId: this.actPageData.id, // 页面ID
          layoutType: this.floorLayout,
          storeyName: basicData.storeyName,
          storeyType: this.floorType,
          fullIdPath,
          categoryId,
          seq: this.floorId ? this.floorData.seq : Number(this.floorSort || 0) + 1
        }

        formData.contentDTOList = itemData.map((v, index) => {
          let ids = ''
          let id = ''
          if (v.categoryIdPath) {
            ids = v.categoryIdPath.join('/')
            id = v.categoryIdPath[v.categoryIdPath.length - 1]
          }
          return {
            coverUrl: v.coverUrl, // 图片地址
            contentTitle: v.contentTitle, // 跳转内容标题
            contentId: v.contentId, // 跳转内容ID
            seq: index + 1, // 子项排序号
            fullIdPath: ids, // 跳转类目树Path
            categoryId: id, // 跳转类目ID (快速入口)
            linkName: v.linkName // 链接名称 (快速入口)
          }
        })
        this.submiting = true
        saveActPageFloor(formData).then(res => {
          if (res.success === 1) {
            this.$message({
              // message: res.msg ? res.msg : `${formData.id ? '编辑' : '新增'}保存成功`,
              message: `${formData.id ? '编辑' : '新增'}保存成功`,
              type: 'success'
            })
            this.$emit('success', formData.id)
            this.nowPageShow = false
          }
          this.submiting = false
        })
      }).catch((err) => {
        this.submiting = false
        if (err) {
          this.$message.warning(err) // '请检查配置是否完整'
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  /deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
  .mt20{
    margin-top: 20px;
  }
</style>
